<script setup lang="ts">
import { useRouterPush } from '@/composables';

const { toHospital, toGohome, toCompanion, toMotherBaby } = useRouterPush()

</script>
<template>
    <view class=" h-full  w-full flex-col-center  ">
        <view class="h-full  w-full flex-center ">
            <view class=" w-10/24 h-full px-8px" @click="toHospital">
                <view class="h-full b-rounded-2 w-full  ">
                    <view
                        class="flex-col-center   justify-start h-full b-rounded-2 bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 ">
                        <view class=" text-white  text-lg mt-1">住院陪护</view>
                        <view class=" text-primary text-xs mt-1">24小时接单</view>
                        <view class=" text-primary text-xs mt-1">无中介费</view>
                        <view class=" text-primary text-xs mt-1">实名认证</view>
                    </view>
                </view>
            </view>
            <view class="h-full w-14/24 px-8px">
                <view class="  h-full  flex-col-center justify-between  ">
                    <!-- hover:from-pink-500 hover:to-yellow-500 -->
                    <view @click="toGohome"
                        class="flex-col-center  bg-gradient-to-r from-green-400 to-blue-500   h-1/2  w-full  b-rounded-2  ">
                        <view class=" text-white text-lg ">居家陪护</view>
                        <view class="text-xs">了解详情</view>
                    </view>

                    <view class="mt-1   h-1/2  w-full ">
                        <view class=" h-full  w-full b-rounded-2 flex-center justify-between ">
                            <view @click="toMotherBaby"
                                class=" w-1/2 bg-amber h-full b-rounded-2 px-2 flex-col-center ">
                                <view class="text-white">母婴护理</view>
                                <view class="  text-xs">了解详情</view>
                            </view>
                            <view @click="toCompanion"
                                class=" ml-1 w-1/2 bg-cyan h-full b-rounded-2 px-2 flex-col-center ">
                                <view class="text-white">就诊陪护</view>
                                <view class="text-xs">了解详情</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
